<template>
  <section>
    <!--班级课表操作-->
    <el-form class="user-search" size="small" :model="query">
      <el-form-item style="">
        <el-checkbox v-model="query.hideFinished" label="只看未点名" border @change="getClassSchedule"/>
      </el-form-item>
    </el-form>

    <el-table v-loading="listLoading" :data="schedules" size="small">
      <el-table-column type="index" label="序号" width="55">
        <template slot-scope="scope">
          <span>{{ scope.$index+(page - 1) * size + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="startTime" label="上课时间" min-width="160">
        <template slot-scope="scope">
          {{ scope.row.startTime | formatDate('yyyy-MM-dd hh:mm') }}
        </template>
      </el-table-column>
      <el-table-column prop="endTime" label="下课时间" min-width="160">
        <template slot-scope="scope">
          {{ scope.row.endTime | formatDate('yyyy-MM-dd hh:mm') }}
        </template>
      </el-table-column>
      <el-table-column prop="statusTxt" label="状态" min-width="100">
          <template slot-scope="scope">
          <span v-if="scope.row.status == 1" class="label label-gray">{{scope.row.statusTxt}}</span>
          <span v-if="scope.row.status == 10" class="label label-green">{{scope.row.statusTxt}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="teacherName" label="任课老师" min-width="100"/>
      <el-table-column prop="scheduleTypeTxt" label="课程类型" min-width="100"/>
      <el-table-column prop="remark" label="备注" min-width="180"/>
      <el-table-column label="操作" min-width="90">
        <template slot-scope="scope">
          <el-button :disabled="scope.row.status != 1" type="text" size="small" @click.native.prevent="handleCallRoll(scope.row)">点名</el-button>
          <el-button :disabled="scope.row.status == 10" type="text" size="small" @click.native.prevent="handleChange(scope.$index, scope.row)">调课</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <!--分页组件-->
    <div class="pg-wrapper">
      <el-pagination
        :page-size="size"
        :total="total"
        layout="total, prev, pager, next, sizes, jumper"
        @size-change="sizeChange"
        @current-change="pageChange"/>
    </div>

    <!-- 点名组件 -->
    <call-roll ref="callRollDlg" @callRollSuccess="onCallRollSuccess"/>
    <!-- 修改课表 -->
    <change-schedule ref="changeScheduleDlg" @scheduleChanged="scheduleChanged"/>
  </section>
</template>

<script>
import { getClassSchedule } from '@/api/class'
import changeSchedule from '@/components/schedule/change-schedule'
import callRoll from '@/components/CallRoll'
export default {
  components: { callRoll, changeSchedule },
  props: {
    classId: {
      type: [String, Number],
      default: 0,
      required: true
    }
  },
  data() {
    return {
      query: {
        hideFinished: false
      },
      schedules: [],
      listLoading: false,
      // 班级调课
      scheduleId: null,
      // 分页功能
      total: 0,
      page: 1,
      size: 10,
    }
  },
  mounted() {
    this.getClassSchedule()
  },
  methods: {
    getClassSchedule() {
      const para = {
        size: this.size,
        page: this.page,
        hideFinished: this.query.hideFinished,
        classId: this.classId
      }
      this.listLoading = true
      getClassSchedule(para).then(res => {
        this.listLoading = false
        this.total = res.data.total
        this.schedules = res.data.list
      })
    },
    handleCallRoll: function(row) {
      this.scheduleId = row.scheduleId
      const dlg = this.$refs.callRollDlg
      dlg.scheduleId = row.scheduleId
      dlg.getStudents()
      dlg.visible = true
    },
    handleChange: function(index, row) {
      const dlg = this.$refs.changeScheduleDlg
      dlg.scheduleId = row.scheduleId
      dlg.visible = true
    },
    scheduleChanged(payload) {
      console.log('接收到调课成功事件！')
      this.getClassSchedule()
    },
    onCallRollSuccess() {
      console.log('接受到点名成功事件!')
      this.getClassSchedule()
    },
    pageChange(e) {
      this.page = e
      this.getClassSchedule()
    },
    sizeChange(e) {
      this.page = 1
      this.size = e
      this.getClassSchedule()
    }
  }
}
</script>